<template>
	<view class="content">
		<view class="box">
			<view class="item2">
				<view class="btn" @click="openYuyan">{{$t('index.language')}}</view>
			</view>
			<view class="item">
				<view class="left">{{$t('index.home')}}：</view>
				<!-- <picker @change="bindPickerChange" :value="index" :range="array">
					<view class="lefta">+{{array[index]}}</view>
				</picker> -->
				<view class="lefta">+{{array[index]}}</view>
				<!-- @input="phoneChange"  -->
				<input class="right" :placeholder="$t('index.shop')" type="number" v-model="phone" />
				<button class="btn1" :disabled="showbtnDisabled"
					@click="getCode">{{!verTime?showSecond+'s':showText}}</button>
			</view>
			<view class="item">
				<view class="left">{{$t('index.warehouse')}}：</view>
				<input class="right" style="width: 80%;" :placeholder="$t('index.user')" v-model="code" maxlength="4" type="number" />
			</view>
			<view class="item">
				<view class="left">{{$t('index.mima')}}：</view>
				<input class="right" style="width: 80%;" :placeholder="$t('index.mimaa')" v-model="mima" />
			</view>
			<view class="item" v-if="!agentId&&!upId">
				<view class="left">{{$t('index.tuijianCode')}}：</view>
				<input class="right" style="width: 80%;" :placeholder="$t('index.tuijianCodea')" v-model="tuijianCode" />
			</view>
			<view class="item2">
				<view class="btn" @click="submit">{{$t('index.zc')}}</view>
			</view>
			<view class="item2">
				<view class="btn1" @click="goLogin">{{$t('index.yyzh1')}}</view>
			</view>
			<!-- <view class="item2">
				<view class="btn1" @click="goDown">{{$t('index.yyzh')}}</view>
			</view> -->
		</view>
		<my-popup ref="showYuyan" type="bottom" :maskClick="true" @change="changeYuyan" class="pop-box">
			<view class="uni-tip-yuyan">
				<view class="item" v-for="(item, index) in locales" :key="index" @click="onLocaleChange(item)">
					<text class="text">{{item.text}}</text>
					<text class="icon-check" v-if="item.code == applicationLocale"></text>
				</view>
			</view>
		</my-popup>
		<my-popup ref="showGetRed" type="center" :maskClick="false" @change="changeGetRed" class="pop-box">
			<view class="uni-tip-GetRed" >
				<view class="img">
					<image src="https://www.msbbox.com/web/playProduce/info.png"></image>
				</view>
				<view class="btn-box">
					<view class="btn" @click="goLogin">{{$t('index.language-sure-confirm')}}</view>
				</view>
			</view>
		</my-popup>
	</view>
</template>

<script>
	var _this;
	export default {
		data() {
			return {
				phone: '',
				code: '',
				agentId:'',
				upId:'',
				btnDisabled: true,
				verTime: true,
				showSecond: 60,
				showText: this.$t('index.sign'),
				array: ['84'],
				index: 0,
				applicationLocale: '',
				mima:'',
				tuijianCode:'',
			}
		},
		onLoad() {
			_this = this;
			_this.agentId=_this.getUrl('agentId');
			_this.upId=_this.getUrl('upId');
			let systemInfo = uni.getSystemInfoSync();
			this.applicationLocale = 'vi';
			this.isAndroid = systemInfo.platform.toLowerCase() === 'android';
			// uni.onLocaleChange((e) => {
			//   this.applicationLocale = e.locale;
			// })
			uni.setLocale('vi');
		},
		computed: {
			showbtnDisabled: function() {
				if (this.phone) {
					return false;
				} else {
					return true;
				}
			},
			locales() {
			  return [{
			      text: this.$t('locale.auto'),
			      code: 'auto'
			    }, {
			      text: this.$t('locale.en'),
			      code: 'en'
			    },
			    {
			      text: this.$t('locale.zh-hans'),
			      code: 'zh-Hans'
			    },
			    {
			      text: this.$t('locale.vi'),
			      code: 'vi'
			    }
			  ]
			}
		},
		methods: {
			bindPickerChange(e) {
				_this.index = e.detail.value
			},
			changeYuyan(e) {},
			closeYuyan() {
				_this.$nextTick(() => {
					_this.$refs['showYuyan'].close();
				});
			},
			openYuyan() {
				_this.$nextTick(() => {
					_this.$refs['showYuyan'].open();
				});
			},
			onLocaleChange(e) {
				uni.setLocale(e.code);
				this.$i18n.locale = e.code;
				this.closeYuyan()
			},
			phoneChange(event) {
				_this.btnDisabled = event.detail.value.length == 11 ? false : true;
			},
			goLogin(){
				_this.closeGetRed();
				window.location.href='https://www.msbbox.com/web/ios/#/';
			},
			getCode() {
				uni.request({
					url: 'https://www.msbbox.com/api/shopServer/user/getCode/' + _this.array[_this.index]+_this.phone,
					data: {},
					header: {},
					success: (res) => {
						console.log(res.data);
						if (res.data.code === 0) {
							_this.verTime = false;
							_this.btnDisabled = true;
							var interval = setInterval(() => {
								--_this.showSecond
							}, 1000)
							setTimeout(() => {
								clearInterval(interval)
								_this.verTime = true;
								_this.showSecond = 60;
								_this.showText = _this.$t('index.share');
								_this.btnDisabled = false;
							}, 60000)
						}else{
							let dddd=JSON.parse(res.data.message)
							uni.showToast({
								title: _this.applicationLocale=='zh-Hans'?dddd.zh:_this.applicationLocale=='vi'?dddd.vie:dddd.en,
								icon:'none'
							})
						}
					}
				})
			},
			// download(){
			// 	window.location.href='http://45.207.52.238/web/ios/#/';
			// },
			// goDown(){
			// 	if(_this.isSystem()=='Android'){
			// 		window.location.href='http://45.207.52.238/web/down/app.apk';
			// 	}else if(_this.isSystem()=='Iphone'){
			// 		window.location.href='http://down.msbbox.com/ZDaN';
			// 	}
			// },
			isSystem() {
				var u = navigator.userAgent;
				var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; 
				var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
				var isIphone = u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1;
				if (isAndroid) {
					return "Android";
				}
				if (isiOS || isIphone) {
					return "Iphone";
				}
				return "";
			},
			submit() {
				let channel='';
				uni.getSystemInfo({
					success: function (res) {
						channel=res.osName;
					}
				});
				if(!_this.phone){
					uni.showToast({
						title:_this.$t('index.shop'),
						icon:'none'
					})
					return;
				}
				if(!_this.code){
					uni.showToast({
						title:_this.$t('index.user'),
						icon:'none'
					})
					return;
				}
				if(!_this.mima){
					uni.showToast({
						title:_this.$t('index.mimaa'),
						icon:'none'
					})
					return;
				}
				if(!_this.agentId&&!_this.upId&&!_this.tuijianCode){
					uni.showToast({
						title:_this.$t('index.kefu'),
						icon:'none'
					})
					return;
				}
				uni.request({
					url: 'https://www.msbbox.com/api/shopServer/user/register',
					method: 'POST',
					data: {
						code: _this.code,
						password: _this.mima,
						phone: _this.array[_this.index]+_this.phone,
						agentId: _this.agentId,
						channel: channel=='android'?1:channel=='ios'?2:'',
						upId: _this.upId,
						userNO: _this.tuijianCode,
					},
					header: {
					    'Content-Type': 'application/x-www-form-urlencoded',
					},
					success: (res) => {
						console.log(res.data);
						if(res.data.code === 0){
							_this.openGetRed()
							// _this.download();
							// uni.showModal({
							// 	title: _this.$t('index.bdbz'),
							// 	content: _this.$t('index.isbdbz'),
							// 	success: function (res) {
							// 		if (res.confirm) {
							// 			_this.download();
							// 		}
							// 	}
							// });
						}else{
							let dddd=JSON.parse(res.data.message)
							uni.showToast({
								title: _this.applicationLocale=='zh-Hans'?dddd.zh:_this.applicationLocale=='vi'?dddd.vie:dddd.en,
								icon:'none'
							})
						}
						
					}
				})
			},
			getUrl(key) {
				var url = location.href;
				if (url.indexOf("?") != -1) {
					var strSub = null;
					var str = url.split("?");
					var strs = str[1].split("&");
					for (var i = 0; i < strs.length; i++) {
						strSub = strs[i].split("="); 
						if (strSub[0] == key) {
							return strSub[1];
						}
					}
				}
				return "";
			},
			changeGetRed(e) {},
			closeGetRed() {
				_this.$nextTick(() => {
					_this.$refs['showGetRed'].close();
				});
			},
			openGetRed() {
				_this.$nextTick(() => {
					_this.$refs['showGetRed'].open();
				});
			},
		}
	}
</script>

<style>
	page {
		background: linear-gradient(180deg, #FFF9EF 0%, #FFFFFF 100%);
	}
</style>
<style scoped lang="scss">
	.uni-tip-GetRed{
		width: 500rpx;
		height: 650rpx;
		position: relative;
		z-index: 10;
		.img{
			width: 100%;
			height: 500rpx;
			image{
				width: 100%;
				height: 500rpx;
			}
		}
		.btn-box{
			width: 100%;
			margin-top: 30rpx;
			display: flex;
			box-sizing: border-box;
			padding: 0 50rpx;
			justify-content: center;
			align-items: center;
			.btn{
				width: 250rpx;
				height: 75rpx;
				line-height: 75rpx;
				background: #FF9416;
				border-radius: 35rpx;
				color: white;
				font-size: 26rpx;
				text-align: center;
			}
		}
	}
	// 选择语言弹窗
	.uni-tip-yuyan{
		width: 100%;
		height: 635rpx;
		overflow: hidden;
		position: relative;
		background: linear-gradient(180deg, #FFF9EF 0%, #FFFFFF 100%);
		z-index: 10;
		box-sizing: border-box;
		padding: 100rpx 50rpx 0 50rpx;
		.item{
			width: 100%;
			height: 80rpx;
			border-bottom: 1px solid darkgrey;
			.text{
				color: black;
				font-size: 30rpx;
			}
			.icon-check{
				width: 60rpx;
				height: 60rpx;
			}
		}
	}
	.content {
		width: 100%;
		height: 100vh;
		box-sizing: border-box;
		padding: 0 50rpx;

		.box {
			width: 100%;
			margin-top: 200rpx;

			.item {
				width: 100%;
				height: 100px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1px solid darkgray;

				.left {
					width: 130rpx;
					font-size: 30rpx;
					font-weight: bold;
					color: black;
				}
				.lefta{
					width: 80rpx;
					font-size: 30rpx;
					font-weight: bold;
					color: black;
				}

				.right {
					width: 300rpx;
					height: 80rpx;
					font-size: 28rpx;
				}

				.btn1 {
					width: 180rpx;
					height: 70rpx;
					background: #FF9416;
					border-radius: 35rpx;
					line-height: 70rpx;
					color: white;
					font-size: 26rpx;
				}

				.btn2 {
					width: 200rpx;
					height: 70rpx;
				}

				.btn1[disabled] {
					background: #CCCCCC !important;
				}
			}

			.item2 {
				width: 100%;
				display: flex;
				justify-content: center;
				margin-top: 100rpx;

				.btn {
					width: 250rpx;
					height: 80rpx;
					line-height: 80rpx;
					text-align: center;
					background: linear-gradient(180deg, #FFAF43 0%, #FFDD80 100%);
					border-radius: 55rpx;
					font-size: 36rpx;
					color: white;
				}
				.btn1 {
					width: 100%;
					height: 80rpx;
					line-height: 80rpx;
					text-align: center;
					background: linear-gradient(180deg, #FFAF43 0%, #FFDD80 100%);
					border-radius: 55rpx;
					font-size: 36rpx;
					color: white;
				}
			}
		}
	}
</style>